<template>
  <div class="comment_reply">
    <div class="head_line">
      <div class="avatar-part">
        <div id="from-user" class="user">
          <el-avatar shape="square" size="small" :src="reply.userfrom_avatar"></el-avatar>
          <div class="user-link">
            <router-link :to="`/app/user_info/${reply.userfrom_userId}/Answer`">{{reply.userfrom_nickname}}</router-link>
          </div>
        </div>
        <el-icon color="#c172fe" size="20"><arrow-right-bold /></el-icon>
        <div id="to-user" class="user">
          <el-avatar shape="square" size="small" :src="reply.userto_avatar"></el-avatar>
          <div class="user-link">
            <router-link :to="`/app/user_info/${reply.userto_userId}/Answer`">{{reply.userto_nickname}}</router-link>
          </div>
        </div>
      </div>
      <div class="time-part">{{reply.create_time}}</div>
    </div>

    <div class="reply_wrap">
      <div class="reply_content">
        <p>{{ reply.cm_reply_content }}</p>
      </div>
      <MessageOptionLine
          @reply="passToParent"
          @delete="handleDeleteReply"
          :reply-message="{comment_id, userto_userId: reply.userfrom_userId, userto_nickname: reply.userfrom_nickname}"
          :by-login-user="reply.byLoginUser"
      ></MessageOptionLine>
    </div>
  </div>
</template>

<script>
import MessageOptionLine from "@/components/MessageOptionLine";
import {ElMessage, ElMessageBox} from "element-plus";
import {deleteComment} from "@/network/comment";
import {deleteCommentReply} from "@/network/comment_reply";
export default {
  name: "CommentReply",
  components: {MessageOptionLine},
  props: {
    comment_id: {
      type: String,
      default: "0"
    },
    reply: {
      type: Object,
      default: {
        userfrom_userId: 0,
        userfrom_nickname: "user1",
        userfrom_avatar: "http://localhost/web-course-backend/photo/defualt.jfif",
        userto_userId: 1,
        userto_nickname: "user2",
        userto_avatar: "http://localhost/web-course-backend/photo/defualt.jfif",
        cm_reply_id: 0,       // 对话id
        cm_reply_content: "", // 对话内容
        create_time: "xxx-xxx-xxx",
        byLoginUser: "0",
      }
    }
  },
  emits: ['reply', 'deleteReply'],
  setup(props, context) {
    // 当收到回复完成时继续将信号传递给父组件处理
    const passToParent = ()=> {
      context.emit("reply");
    }
    const handleDeleteReply = ()=> {
      // console.log(props.reply.cm_reply_id);
      ElMessageBox.confirm(
          '你确定要删除这条回复吗？',
          'Warning',
          {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning',
          }
      )
      .then(() => {
        deleteCommentReply(props.reply.cm_reply_id).then(res=> {
          ElMessage({
            type: 'success',
            message: '回复删除成功！',
            duration: 1000
          });
          // 发送信号给父组件进行更新信息
          context.emit("deleteReply");
        })
      })
      .catch(() => { })
    }
    return {
      passToParent,
      handleDeleteReply,
    }
  }
}
</script>

<style scoped lang="scss">
@import "../assets/scss/common";

.comment_reply {
  padding-bottom: 10px;
  .head_line {
    padding: 10px 0 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    .avatar-part {
      display: flex;
      flex-direction: row;
      .user {
        display: flex;
        flex-direction: row;
        align-items: center;
      }
      .user-link {
        margin: 0 8px;
        font-weight: bold;
      }
      .icon {
        position: relative;
        top: 6px;
        right: 5px;
      }
    }
    .time-part {
      font-size: 14px;
      color: #8590a6;
    }
  }
  .reply_wrap {
    padding-left: 35px;
    .reply_content {
    }
  }

}
</style>
